<template>
    <div id="makelessors">
        <div style="margin: 20px 20px 10px 0; width: 30%">
            <el-input
                placeholder="请输入内容"
                v-model="input"
                class="input-with-select"
            >
                <el-select v-model="select" slot="prepend" placeholder="请选择">
                    <el-option label="账号" value="account"></el-option>
                    <el-option label="电话" value="phone"></el-option>
                    <el-option label="信用值" value="credits"></el-option>
                </el-select>
                <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click="serach"
                ></el-button>
            </el-input>
        </div>
        <div id="refresh">
            <div class="sort">
                <span class="el-icon-sort" @click="creditSort">排序</span>
                <span class="el-icon-refresh" @click="$router.go(0)"
                    >刷新页面</span
                >
            </div>
        </div>
        <el-table
            :data="pagerows"
            height="400"
            border
            style="width: 100%"
        >
            <!-- <el-table-column align="center" prop="_id" label="编号" width="180">
            </el-table-column> -->
            <el-table-column
                align="center"
                prop="account"
                label="账号"
                width="180"
            >
            </el-table-column>
            <!-- <el-table-column align="center" prop="password" label="密码">
            </el-table-column> -->
            <el-table-column align="center" prop="phone" label="电话号码">
                <!-- <template slot-scope="scope">
                    {{ scope.row.classid.classname }}
                </template> -->
            </el-table-column>
            <!-- <el-table-column label="状态" prop="state" align="center">
            </el-table-column> -->

            <el-table-column label="信用值" prop="credits" align="center">
                <!-- <template slot-scope="scope"> -->
                <!-- <el-image
                        style="width: 50px; height: 50px"
                        :src="
                            'http://localhost:3000/images/' +
                            (scope.row.imagename || 'default.jpg')
                        "
                        fit="contain"
                    ></el-image> -->
                <!-- </template> -->
            </el-table-column>

            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" @click="Editlessors(scope.row._id)"
                        >编辑</el-button
                    >
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row._id)"
                        >删除</el-button
                    >
                    <el-button
                        v-if="scope.row.state == 1"
                        size="mini"
                        type="success"
                        @click="changestate(scope.row._id, (value = 2))"
                        >冻结</el-button
                    >

                    <el-button
                        v-if="scope.row.state == 2"
                        size="mini"
                        type="info"
                        @click="changestate(scope.row._id, (value = 1))"
                        >解冻</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="lessors.currentPage"
            :page-sizes="[3, 4, 5, 6]"
            :page-size="3"
            layout="total, sizes, prev, pager, next, jumper"
            :total="lessorsData.totalitem"
        >
        </el-pagination>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
    "admins"
);

export default {
    data() {
        return {
            input: "",
            select: "account",
            isSort:false
        };
    },
    watch: {
        "lessors.pageSize"() {
            this.getLessors();
        },
        "lessors.currentPage"() {
            this.getLessors();
        },
        "lessors.value"() {
            this.getLessors();
        },
    },
    mounted() {
        this.getLessors();
    },
    computed: {
        ...mapState(["lessors", "lessorsData","pagerows"]),
    },
    methods: {
        ...mapActions(["getLessors", "modifyLessors", "deleteLessors",]),
        ...mapMutations([
            "changeCurrentPagel",
            "changeValuel",
            "changePageSizel",
            "changelessorsData",
            "changepagerows"
        ]),

     //编辑出租方
     Editlessors(val){
         this.$router.push("/system/editlessors/"+val)
     },
        //搜索
        serach() {
            this.lessors.type = this.select;
            this.lessors.value = this.input;
        },
        //排序
        creditSort() {
            if (this.isSort) {
                this.changepagerows(
                    this.pagerows.sort((e1, e2) => {
                        return e1.credits - e2.credits;
                    })
                );
                //    this.lessorsData.pagerows.sort((e1, e2) => {       return e1.credits - e2.credits;});
            } else {
                this.changepagerows(
                    this.pagerows.sort((e1, e2) => {
                        return e2.credits - e1.credits;
                    })
                );
            }
            this.isSort = !this.isSort;
        },

        handleSizeChange(val) {
            this.changePageSizel(val);
        },
        handleCurrentChange(val) {
            this.changeCurrentPagel(val);
        },
        // handleEdit(index, row) {
        //     this.$router.push(`/studentinfo/updatastudent/${row._id}`);
        // },

        //刪除出租方信息
        async handleDelete(index, row) {
            const result = await this.deleteLessors(row);
            if (result.status) {
                if (this.lessorsData.pagerows.length <= 1) {
                    this.lessors.currentPage--;
                }
                this.getLessors();
            } else {
                alert("刪除失敗");
            }
        },

        //更新出租方state是否冻结
        async changestate(id, value) {
            const reslut = await this.modifyLessors({ _id: id, state: value });
            if (reslut.status) {
                this.getLessors();
            } else {
                alert("操作失败");
            }
        },

        // query() {
        //     this.getstudent();
        // },
        // change(id) {
        //     this.$router.push(`/system/upd/${id}`);
        // },
    },
};
</script>

<style scoped>
 .el-select{
    width: 80px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
#refresh {
    overflow: hidden;
    width: 98%;
    font-size: 16px;
    margin: 10px 0px;
}
#refresh .sort {
    float: right;
}
.sort span {
    text-align: center;
    width: 100px;
    height: 40px;
    line-height: 40px;
    background-color: skyblue;
    margin-left: 20px;
}
.el-select .el-input {
    width: 130px;
}
.input-with-select .el-input-group__prepend {
    background-color: #fff;
}
table {
    width: 98%;
    height: 98%;
    margin: 0 auto;
    margin-top: 20px;
    text-align: center;
    border-collapse: collapse;
}
tr {
    height: 40px;
}
select {
    margin-top: 20px;
}
#buttons {
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
    height: 60px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
button {
    height: 30px;
    width: 80px;
}
.el-pagination {
    margin-top: 10px;
    text-align: center;
}
</style>